import React from 'react';
import { Card } from 'antd';
import createG2 from 'g2-react';
import { Stat, Frame } from 'g2';

const Chart = createG2((chart) => {
    // 以 year 为维度划分分面
  chart.facet(['name'], {
    margin: 0,
    facetTitle: {
      colDimTitle: {
        title: 'null',
      },
      colTitle: {
        title: {
          fontSize: 18,
          textAlign: 'center',
          fill: '#999',
        },
      },
    },
  });
  chart.legend({
    position: 'left',
  });
  chart.coord('theta', {
    radius: 1,
    inner: 0.35,
  });
  chart.tooltip({
    title: null,
  });
  chart.intervalStack().position(Stat.summary.percent('new_user'))
        .color('type')
        .label('..percent', {
          offset: -2,
        })
        .style({
          lineWidth: 1,
        });
  chart.render();
});


class PieChart extends React.Component {
  constructor(...args) {
    super(...args);
    this.state = {
      forceFit: true,
      width: 600,
      height: 160,
      plotCfg: {
        margin: 0,
      },

    };
  }
  render() {
    const { msg, title } = this.props;
        // const myarr= [
        //     {name:2007, type:'亚太地区', new_user: 7860*0.189},
        //     {name:2007, type:'非洲及中东', new_user: 7860*0.042},
        //     {name:2007, type:'拉丁美洲', new_user: 7860*0.025},
        //     {name:2007, type:'中欧和东欧', new_user: 7860*0.018},
        //     {name:2007, type:'西欧', new_user: 7860*0.462},
        //     {name:2007, type:'北美', new_user: 7860*0.265},

        //   ]
    const msgs = msg || [];
    return (
      <Card >
        <Chart
          data={msgs}
          width={this.state.width}
          height={this.state.height}
          plotCfg={this.state.plotCfg}
          forceFit={this.state.forceFit}
        />
      </Card>
    );
  }
}


PieChart.propTypes = {
};


export default PieChart;

